import React from "react";
import { Layout, theme, ConfigProvider } from "antd";
import Sider from "./Sider"; // 引入Sider组件
import Content from "./Content"; // 引入Content组件
import Header from "./Header";
import Breadcrumb from "./Breadcrumb";

const App = () => {
  // 主题令牌
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <Layout
      style={{
        display: "flex",
        flexDirection: "column",
        height: "100vh",
      }}
    >
      {/* 头部 */}
      <Header
        style={{
          backgroundColor: colorBgContainer,
          borderBottom: "2px solid rgb(210, 210, 210)",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "0",
        }}
      />

      <Layout>
        {/* 侧边栏 */}
        <ConfigProvider
          theme={{
            components: {
              Layout: {
                /* 这里是你的组件 token */
                lightTriggerBg: "#747474",
                lightTriggerColor: "#999999",
                siderBg: "#f0f2f5",
              },
            },
          }}
        >
          <Sider />
        </ConfigProvider>
        <Layout
          style={{
            padding: "0 20px 20px",
          }}
        >
          {/* 面包屑 */}
          <Breadcrumb />

          {/* 内容 */}
          <Content
            style={{
              padding: 10,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          ></Content>
        </Layout>
      </Layout>
    </Layout>
  );
};
export default App;
